import Taro, {useState, useEffect, useCallback, FC, useMemo} from '@tarojs/taro'
import {View, Text, Image, Video, ScrollView} from '@tarojs/components'
import {AtTabs, AtTabsPane} from 'taro-ui'
import loveLornUser, {MemberHomePageVO, UserPictureVO} from '../../api/lovelorn-user'
import platformLive, {IPage, ShortVideoVO} from '../../api/platform-live'
import {getGlobalData} from '../../utils/global'
import './index.scss'

const labelColor = ['#989FEF', '#FE85CC', '#6CD0FF', '#FFBC67', '#71D8C0']
const tabList = [
  {
    title: '视频',
  },
  {
    title: '生活照',
  },
  {
    title: '信息',
  },
]
function MenberHomaPage() {
  const [activeIndex, setActiveIndex] = useState(0)
  const [memberHomePage, setMemberHomePage] = useState({} as MemberHomePageVO)
  const [userPicture, setUserPicture] = useState({} as UserPictureVO)
  const [pictureList, setPictureList] = useState([])
  const [isSelf, setIsSelf] = useState(false)
  const [labels, setLabels] = useState([])
  const [videoList, setVideoList] = useState([] as IPage)
  const [dataList, setDataList] = useState({})

  const [userInfo, setUserInfo] = useState(
    getGlobalData('loginVO') ? getGlobalData('loginVO').user : {},
  )

  const getUserSelect = async () => {
    try {
      let res = await loveLornUser.batch.get({
        dataClassList: [
          'member_monthly_income',
          'member_education',
          'member_marital_status',
          'sweetheart_has_car',
          'sweetheart_accept_children',
          'member_career',
          'sl_has_children',
        ],
      })
      console.log(res, 'res')
      setDataList(res)
    } catch (ex) {
      console.log(ex)
    }
  }
  useEffect(() => {
    Taro.getStorage({
      key: 'loginVO',
      success: function(res) {
        setUserInfo(res.data.user)
      },
    })
    getUserSelect()
  }, [])

  const renderOccuation = (key, type) => {
    let str = dataList && dataList[type] && dataList[type].filter(el => el.key == key)
    console.log(str)
    return str[0].value
  }

  const getMenberData = async () => {
    try {
      const res = await loveLornUser.memberHomePage.get({
        toUserId: this.$router.params.toUserId,
      })
      if (this.$router.params.toUserId == userInfo && userInfo.userId) {
        setIsSelf(true)
      } else {
        setIsSelf(false)
      }
      console.log(res)
      setMemberHomePage(res)
      setPictureList((res.userPictureVO && res.userPictureVO.pictureList) || [])
    } catch (ex) {
      console.log(ex)
    }
  }

  const getShortVideo = async () => {
    try {
      let res = await platformLive.shortVideos.showUserVideo({
        queryUserId: this.$router.params.toUserId,
        pageNo: 1,
        pageSize: 20,
      })
      console.log(res, 'res')
      setVideoList(res.records)
    } catch (ex) {
      console.log(ex, 'ex')
    }
  }
  useEffect(() => {
    console.log(this.$router.params.toUserId, 'this.$router.params')
    getMenberData()
    getShortVideo()
  }, [])

  const navigeTeToMine = () => {
    Taro.navigateTo({
      url: '/pages/MyLabel/index',
    })
  }

  const changeActiveIndex = useCallback(
    e => {
      setActiveIndex(e)
    },
    [activeIndex],
  )

  const navitoMine = () => {
    Taro.navigateTo({
      url: '/pages/MyInfo/index',
    })
  }

  return (
    <View className="menberHomaPage">
      <View className="menberHomeTop flex flexCenter">
        <View className="userText">
          <View className="userTitle">{memberHomePage.memberBasicInfo.nickName}</View>
          <View className="userDesc multi-txt-overhide">
            {memberHomePage.memberBasicInfo.userSignature}
          </View>
        </View>
        <Image
          onClick={() => {
            Taro.previewImage({
              current: memberHomePage.memberBasicInfo.userImg,
              urls: [memberHomePage.memberBasicInfo.userImg],
            })
          }}
          className="userAvater"
          src={memberHomePage.memberBasicInfo.userImg}
        />
      </View>
      <View className="userInfo flex">
        {memberHomePage.memberBasicInfo.userAge && (
          <View className="userInfoItem">
            {memberHomePage.memberBasicInfo.userAge}
            <Text className="userKey">年龄</Text>
          </View>
        )}
        {memberHomePage.memberBasicInfo.heigth && (
          <View className="userInfoItem">
            {memberHomePage.memberBasicInfo.heigth}
            <Text className="userKey">身高</Text>
          </View>
        )}
        {memberHomePage.memberBasicInfo && memberHomePage.memberBasicInfo.monthlyProfile && (
          <View className="userInfoItem">
            {renderOccuation(
              memberHomePage.memberBasicInfo.monthlyProfile,
              'member_monthly_income',
            )}
            <Text className="userKey">收入</Text>
          </View>
        )}
        {memberHomePage.memberBasicInfo.userCity && (
          <View className="userInfoItem">
            {memberHomePage.memberBasicInfo.userCity}
            <Text className="userKey">位置</Text>
          </View>
        )}
      </View>

      {memberHomePage.memberBasicInfo &&
        memberHomePage.memberBasicInfo.gender == 1 &&
        userInfo &&
        userInfo.user &&
        userInfo.user.gender != memberHomePage.memberBasicInfo.gender && (
          <View className="userOper">
            <Image
              className="userLabelImg"
              src={require('../../assets/seeking/userMale.png')}
              mode="widthFix"
            />
          </View>
        )}

      {memberHomePage.memberBasicInfo &&
        memberHomePage.memberBasicInfo.gender == 2 &&
        userInfo &&
        userInfo.user &&
        userInfo.user.gender != memberHomePage.memberBasicInfo.gender && (
          <View className="userOper">
            <Image
              className="userLabelImg"
              src={require('../../assets/seeking/userFemale.png')}
              mode="widthFix"
            />
          </View>
        )}

      <View style={{position: 'relative'}}>
        <View className="seekingTitle">
          <View
            className="seekingTab"
            onClick={() => {
              changeActiveIndex(0)
            }}>
            <Text className={['seekingText', activeIndex == 0 ? 'active' : '']}>
              视频
              {videoList.length && <Text className="menberLife">{videoList.length}</Text>}
            </Text>
          </View>
          <View
            className="seekingTab"
            onClick={() => {
              changeActiveIndex(1)
            }}>
            <Text className={['seekingText', activeIndex == 1 ? 'active' : '']}>
              生活照
              {pictureList.length > 0 && <Text className="menberLife">{pictureList.length}</Text>}
            </Text>
          </View>
          <View
            className="seekingTab"
            onClick={() => {
              changeActiveIndex(2)
            }}>
            <Text className={['seekingText', activeIndex == 2 ? 'active' : '']}>信息</Text>
          </View>
        </View>
        <AtTabs
          animated
          scroll
          current={activeIndex}
          tabList={tabList}
          onClick={e => {
            setActiveIndex(e)
          }}>
          {tabList.map((elItem, elIndex) => {
            return (
              <AtTabsPane current={activeIndex} index={elIndex} key={`index${elIndex}`}>
                {activeIndex == 0 && (
                  <View className="menberVideoWrap">
                    {videoList &&
                      videoList.map((el: ShortVideoVO, index) => {
                        return (
                          <View
                            className="videoList"
                            key={`index${index}`}
                            onClick={() => {
                              Taro.navigateTo({
                                url: `/pages/VideoDetail/index?index=${index}&toUserId=${this.$router.params.toUserId}`,
                              })
                            }}>
                            <Image src={el.coverUrl} mode="widthFix" className="videoTag" />
                            <View className="videoIcon">
                              <Text className=" iconfont iconplay"></Text>
                            </View>
                            <View className="videoDesc flex">
                              <View className="videoTitle">{el.title}</View>
                              <View className="videoRight">
                                {el.likeFlag == 0 && <Text className="iconfont iconlike"></Text>}
                                {el.likeFlag == 1 && (
                                  <Text className="iconfont iconlike follow_active"></Text>
                                )}
                                <Text className="videoNum">{el.likes}</Text>
                              </View>
                            </View>
                          </View>
                        )
                      })}
                    {!videoList ||
                      (videoList.length == 0 && (
                        <View className="emptyAddress flex">
                          <View>
                            <Image
                              src={require('../../assets/seeking/noInfo.png')}
                              className="noData"
                            />
                            <View className="emptyDesc">暂时还没有个人视频</View>
                          </View>
                        </View>
                      ))}
                  </View>
                )}
                {activeIndex == 1 && (
                  <View className="lifePhoto">
                    {(!pictureList || pictureList.length == 0) && (
                      <View className="emptyAddress flex">
                        <View>
                          <Image
                            src={require('../../assets/seeking/noInfo.png')}
                            className="noData"
                          />
                          <View className="emptyDesc">暂时还没有生活照</View>
                        </View>
                      </View>
                    )}
                    {pictureList != null &&
                      pictureList.map((el, index) => {
                        return (
                          <Image
                            key={`index${index}`}
                            src={el.sourceUrl}
                            mode="widthFix"
                            className="lifePhotoList"
                            onClick={() => {
                              Taro.previewImage({
                                current: el.sourceUrl,
                                urls: [el.sourceUrl],
                              })
                            }}
                          />
                        )
                      })}
                  </View>
                )}
                {activeIndex == 2 && (
                  <View className="menberInfo">
                    {(!memberHomePage.labels || memberHomePage.labels.length == 0) &&
                      !isSelf &&
                      memberHomePage.memberBasicInfo &&
                      memberHomePage.memberBasicInfo.weight == null &&
                      memberHomePage.memberBasicInfo.heigth == null &&
                      memberHomePage.memberBasicInfo.occupation == null &&
                      memberHomePage.memberBasicInfo.educationBackground == null &&
                      memberHomePage.memberBasicInfo.maritalStatus == null &&
                      memberHomePage.memberBasicInfo.hasChildren == null &&
                      memberHomePage.memberBasicInfo.hasCar == null &&
                      memberHomePage.memberAttestationStatusVO.realName == null &&
                      memberHomePage.memberAttestationStatusVO.education == null &&
                      memberHomePage.memberAttestationStatusVO.car == null &&
                      memberHomePage.memberAttestationStatusVO.house == null && (
                        <View className="emptyAddress flex">
                          <View>
                            <Image
                              src={require('../../assets/seeking/noInfo.png')}
                              className="noData"
                            />
                            <View className="emptyDesc">暂时还没有详细资料~</View>
                          </View>
                        </View>
                      )}
                    {!memberHomePage.memberBasicInfo ||
                      (!memberHomePage.memberBasicInfo.weight &&
                        !memberHomePage.memberBasicInfo.heigth &&
                        !memberHomePage.memberBasicInfo.occupation &&
                        !memberHomePage.memberBasicInfo.educationBackground &&
                        !memberHomePage.memberBasicInfo.maritalStatus &&
                        !memberHomePage.memberBasicInfo.hasChildren &&
                        !memberHomePage.memberBasicInfo.hasCar &&
                        isSelf && (
                          <View className="menberInfoList">
                            <View className="infoDesc ziliao">
                              <Text className="ziliaoInner">我的信息</Text>
                            </View>
                            <View className="flex" onClick={navitoMine}>
                              <Text>真实资料，精准匹配</Text>
                              <Text className="iconfont iconarrow-right"></Text>
                            </View>
                          </View>
                        ))}

                    {/* 别人标签 */}
                    {memberHomePage.labels && memberHomePage.labels.length && !isSelf && (
                      <View className="menberInfoList">
                        <View className="infoDesc label">
                          <Text className="ziliaoInner">标签 </Text>
                        </View>
                        <View className="infoDetail labelList">
                          {memberHomePage.labels.map((el, index) => {
                            return (
                              <Text
                                key={`index${index}`}
                                className="labelTag"
                                style={{background: `${labelColor[index]}`}}>
                                {el.labelName}
                              </Text>
                            )
                          })}
                        </View>
                      </View>
                    )}
                    {/* 查看自己标签且有标签时候 */}
                    {memberHomePage.labels && memberHomePage.labels.length && isSelf && (
                      <View className="menberInfoList">
                        <View className="infoDesc label">
                          <Text className="ziliaoInner"> 我的标签 </Text>
                        </View>
                        <View className="infoDetail labelList">
                          {memberHomePage.labels.map((el, index) => {
                            return <Text className="labelTag">{el.labelName}</Text>
                          })}
                        </View>
                      </View>
                    )}
                    {!memberHomePage.labels ||
                      (memberHomePage.labels.length == 0 && isSelf && (
                        <View className="menberInfoList">
                          <View className="infoDesc label">
                            <View className="ziliaoInner" onClick={navigeTeToMine}>
                              {' '}
                              我的标签
                              <Text className="iconfont iconarrow-right">编辑</Text>
                            </View>
                          </View>
                        </View>
                      ))}

                    {(!memberHomePage.memberBasicInfo ||
                      memberHomePage.memberBasicInfo.weight ||
                      memberHomePage.memberBasicInfo.heigth ||
                      memberHomePage.memberBasicInfo.occupation ||
                      memberHomePage.memberBasicInfo.educationBackground ||
                      memberHomePage.memberBasicInfo.maritalStatus ||
                      memberHomePage.memberBasicInfo.hasChildren ||
                      memberHomePage.memberBasicInfo.hasCar) && (
                      <View className="menberInfoList">
                        <View className="infoDesc ziliao">
                          <Text className="ziliaoInner">{isSelf ? '我的信息' : '资料'}</Text>
                        </View>
                        <View className="infoDetail">
                          {isSelf &&
                            !memberHomePage.memberBasicInfo &&
                            !memberHomePage.memberBasicInfo.weight &&
                            !memberHomePage.memberBasicInfo.heigth &&
                            !memberHomePage.memberBasicInfo.occupation &&
                            !memberHomePage.memberBasicInfo.educationBackground &&
                            !memberHomePage.memberBasicInfo.maritalStatus &&
                            !memberHomePage.memberBasicInfo.hasChildren &&
                            !memberHomePage.memberBasicInfo.hasCar && (
                              <View className="flex" onClick={navitoMine}>
                                <Text>真实资料，精准匹配</Text>
                                <Text className="iconfont iconarrow-right"></Text>
                              </View>
                            )}
                          {memberHomePage.memberBasicInfo.weight != null && (
                            <View className="flex">
                              <Text>体重</Text>
                              <Text>{memberHomePage.memberBasicInfo.weight}kg</Text>
                            </View>
                          )}
                          {memberHomePage.memberBasicInfo &&
                            memberHomePage.memberBasicInfo.occupation != null && (
                              <View className="flex">
                                <Text>职业</Text>
                                <Text>
                                  {/* {console.warn('aaa')} */}
                                  {renderOccuation(
                                    memberHomePage.memberBasicInfo.occupation,
                                    'member_career',
                                  )}
                                </Text>
                              </View>
                            )}

                          {memberHomePage.memberBasicInfo &&
                            memberHomePage.memberBasicInfo.educationBackground != null && (
                              <View className="flex">
                                <Text>学历</Text>
                                <Text>
                                  {renderOccuation(
                                    memberHomePage.memberBasicInfo &&
                                      memberHomePage.memberBasicInfo.educationBackground,
                                    'member_education',
                                  )}
                                </Text>
                              </View>
                            )}

                          {memberHomePage.memberBasicInfo &&
                            memberHomePage.memberBasicInfo.maritalStatus != null && (
                              <View className="flex">
                                <Text>婚姻状况</Text>
                                <Text>
                                  {' '}
                                  {renderOccuation(
                                    memberHomePage.memberBasicInfo.maritalStatus,
                                    'member_marital_status',
                                  )}
                                </Text>
                              </View>
                            )}
                          {memberHomePage.memberBasicInfo &&
                            memberHomePage.memberBasicInfo.hasChildren != null && (
                              <View className="flex">
                                <Text>有无子女</Text>
                                <Text>
                                  {renderOccuation(
                                    memberHomePage.memberBasicInfo.hasChildren,
                                    'sl_has_children',
                                  )}
                                </Text>
                              </View>
                            )}

                          {memberHomePage.memberBasicInfo &&
                            memberHomePage.memberBasicInfo.hasCar != null && (
                              <View className="flex">
                                <Text>有无车辆</Text>
                                <Text>
                                  {renderOccuation(
                                    memberHomePage.memberBasicInfo.hasCar,
                                    'sweetheart_has_car',
                                  )}
                                </Text>
                              </View>
                            )}
                        </View>
                      </View>
                    )}
                    {(memberHomePage.memberAttestationStatusVO.realName ||
                      memberHomePage.memberAttestationStatusVO.education ||
                      memberHomePage.memberAttestationStatusVO.car ||
                      memberHomePage.memberAttestationStatusVO.house) && (
                      <View className="menberInfoList">
                        <View className="infoDesc renzhen">
                          <Text className="ziliaoInner">认证</Text>
                        </View>
                        <View className="infoDetail flex sr">
                          {isSelf &&
                            !memberHomePage.memberAttestationStatusVO.realName &&
                            !memberHomePage.memberAttestationStatusVO.education &&
                            !memberHomePage.memberAttestationStatusVO.car &&
                            !memberHomePage.memberAttestationStatusVO.house && (
                              <View className="flex">
                                <Text>选择!从真实开始</Text>
                                <Text className="iconfont iconarrow-right"></Text>
                              </View>
                            )}
                          {memberHomePage.memberAttestationStatusVO &&
                            memberHomePage.memberAttestationStatusVO.realName != null && (
                              <View className="tagList">
                                <Image
                                  src={require('../../assets/seeking/shiming.png')}
                                  mode="widthFix"
                                  className="infoIcon"
                                />
                                <Text>实名认证</Text>
                              </View>
                            )}
                          {memberHomePage.memberAttestationStatusVO &&
                            memberHomePage.memberAttestationStatusVO.house && (
                              <View className="tagList">
                                <Image
                                  src={require('../../assets/seeking/fangchang.png')}
                                  mode="widthFix"
                                  className="infoIcon"
                                />
                                <Text>房产认证</Text>
                              </View>
                            )}
                          {memberHomePage.memberAttestationStatusVO &&
                            memberHomePage.memberAttestationStatusVO.car && (
                              <View className="tagList">
                                <Image
                                  src={require('../../assets/seeking/cheliang.png')}
                                  mode="widthFix"
                                  className="infoIcon"
                                />
                                <Text>车辆认证</Text>
                              </View>
                            )}
                          {memberHomePage.memberAttestationStatusVO &&
                            memberHomePage.memberAttestationStatusVO.education && (
                              <View className="tagList">
                                <Image
                                  src={require('../../assets/seeking/xueli.png')}
                                  mode="widthFix"
                                  className="infoIcon"
                                />
                                <Text>学历认证</Text>
                              </View>
                            )}
                        </View>
                      </View>
                    )}
                  </View>
                )}
              </AtTabsPane>
            )
          })}
        </AtTabs>
      </View>
    </View>
  )
}

export default MenberHomaPage
